<template>
    <el-container>
        <el-header :style="{ background: bgColor }">
            <TopHeader></TopHeader>
        </el-header>
        <el-container>
            <el-aside :width="isOpen?'auto':'220px'">
                <Aside></Aside>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-footer>
                    <Btomfooter></Btomfooter>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>
<script setup lang="ts">
import { ref, toRef, watchEffect } from "vue"
import Aside from "../layout/Aside.vue"
import TopHeader from "../layout/TopHeader.vue"
import Btomfooter from "../layout/Btomfooter.vue"
import { bgColor } from "../utils/common"
import {useStore} from 'vuex'
const store = useStore()
const isOpen = ref(store.state.isCollapse)
watchEffect(()=>{
    isOpen.value = store.state.isCollapse
})
const windowHeight: number = window.innerHeight
const windowHeightRef = ref(windowHeight)
</script>

<style scoped></style>